<template>
  <div class="container">
    <div v-if="model.workstationId" class="appraise_item">
      <div class="title">工作站评价</div>
      <div class="appraise_star">
        <div class="appraise_star_item">
          <div class="appraise_star_label">
            设备整齐
          </div>
          <div class="appraise_star_content">
            <van-rate
                :readonly="type==2"
                size="21"
                color="#FEAD22"
                @change="updataModel($event,'equipmentStar')"
                :value="model.equipmentStar"
                :allow-half="false"
                void-icon="star"
                void-color="#d3d2d2"
            />
          </div>
          <div class="appraise_star_value">
            {{ model.equipmentStar }}分
          </div>
        </div>
        <div class="appraise_star_item">
          <div class="appraise_star_label">
            场地整洁
          </div>
          <div class="appraise_star_content">
            <van-rate
                :readonly="type==2"
                size="21"
                color="#FEAD22"
                @change="updataModel($event,'envStar')"
                :value="model.envStar"
                :allow-half="false"
                void-icon="star"
                void-color="#d3d2d2"
            />
          </div>
          <div class="appraise_star_value">
            {{ model.envStar }}分
          </div>
        </div>
        <div class="appraise_star_item">
          <div class="appraise_star_label">
            管理得当
          </div>
          <div class="appraise_star_content">
            <van-rate
                :readonly="type==2"
                size="21"
                color="#FEAD22"
                @change="updataModel($event,'managerStar')"
                :value="model.managerStar"
                :allow-half="false"
                void-icon="star"
                void-color="#d3d2d2"
            />
          </div>
          <div class="appraise_star_value">
            {{ model.managerStar }}分
          </div>
        </div>
      </div>
      <div class="textarea_content">
        <van-field
            :disabled="type==2"
            maxlength="500"
            show-word-limit
            clearable
            @change="updataModel($event,'commentToWorkstation')"
            :value="model.commentToWorkstation"
            type="textarea"
            placeholder="请输入你想说的话"
            :autosize="{
               maxHeight: 100, minHeight: 50
            }"
            :border="false"
        />
      </div>
<!--      <div>-->
<!--        <van-uploader  max-count="3" :file-list="fileList" @after-read="afterRead" @delete="del" />-->
<!--      </div>-->
    </div>
    <div class="appraise_item">
      <div class="title">课程评价</div>
      <div class="appraise_star">
        <div class="appraise_star_item">
          <div class="appraise_star_label">
            教学设计
          </div>
          <div class="appraise_star_content">
            <van-rate
                :readonly="type==2"
                size="21"
                color="#FEAD22"
                @change="updataModel($event,'courseStar')"
                :value="model.courseStar"
                :allow-half="false"
                void-icon="star"
                void-color="#d3d2d2"
            />
          </div>
          <div class="appraise_star_value">
            {{ model.courseStar }}分
          </div>
        </div>
        <div class="appraise_star_item">
          <div class="appraise_star_label">
            资源精准
          </div>
          <div class="appraise_star_content">
            <van-rate
                :readonly="type==2"
                size="21"
                color="#FEAD22"
                @change="updataModel($event,'resourcesStar')"
                :value="model.resourcesStar"
                :allow-half="false"
                void-icon="star"
                void-color="#d3d2d2"
            />
          </div>
          <div class="appraise_star_value">
            {{ model.resourcesStar }}分
          </div>
        </div>
        <div class="appraise_star_item">
          <div class="appraise_star_label">
            难度适中
          </div>
          <div class="appraise_star_content">
            <van-rate
                :readonly="type==2"
                size="21"
                color="#FEAD22"
                @change="updataModel($event,'difficultyStar')"
                :value="model.difficultyStar"
                :allow-half="false"
                void-icon="star"
                void-color="#d3d2d2"
            />
          </div>
          <div class="appraise_star_value">
            {{ model.difficultyStar }}分
          </div>
        </div>
      </div>
      <div class="textarea_content">
        <van-field
            :disabled="type==2"
            maxlength="500"
            show-word-limit
            clearable
            @change="updataModel($event,'commentToCourse')"
            :value="model.commentToCourse"
            type="textarea"
            placeholder="请输入你想说的话"
            :autosize="{
               maxHeight: 100, minHeight: 50
            }"
            :border="false"
        />
      </div>
    </div>
    <div class="appraise_item">
      <div class="title">教师评价</div>
      <div class="appraise_star">
        <div class="appraise_star_item">
          <div class="appraise_star_label">
            能力水平
          </div>
          <div class="appraise_star_content">
            <van-rate
                :readonly="type==2"
                size="21"
                color="#FEAD22"
                @change="updataModel($event,'abilityStar')"
                :value="model.abilityStar"
                :allow-half="false"
                void-icon="star"
                void-color="#d3d2d2"
            />
          </div>
          <div class="appraise_star_value">
            {{ model.abilityStar }}分
          </div>
        </div>
        <div class="appraise_star_item">
          <div class="appraise_star_label">
            敬业精神
          </div>
          <div class="appraise_star_content">
            <van-rate
                :readonly="type==2"
                size="21"
                color="#FEAD22"
                @change="updataModel($event,'dedicatedStar')"
                :value="model.dedicatedStar"
                :allow-half="false"
                void-icon="star"
                void-color="#d3d2d2"
            />
          </div>
          <div class="appraise_star_value">
            {{ model.dedicatedStar }}分
          </div>
        </div>
        <div class="appraise_star_item">
          <div class="appraise_star_label">
            教学热情
          </div>
          <div class="appraise_star_content">
            <van-rate
                :readonly="type==2"
                size="21"
                color="#FEAD22"
                @change="updataModel($event,'enthusiasmStar')"
                :value="model.enthusiasmStar"
                :allow-half="false"
                void-icon="star"
                void-color="#d3d2d2"
            />
          </div>
          <div class="appraise_star_value">
            {{ model.enthusiasmStar }}分
          </div>
        </div>
      </div>
      <div class="textarea_content">
        <van-field
            :disabled="type==2"
            maxlength="500"
            show-word-limit
            clearable
            :value="model.commentToTeacher"
            @change="updataModel($event,'commentToTeacher')"
            type="textarea"
            placeholder="请输入你想说的话"
            :autosize="{
               maxHeight: 100, minHeight: 50
            }"
            :border="false"
        />
      </div>
    </div>
    <!--   占位符     -->
    <div v-if="type==1" style="width: 100%;height: calc(108rpx + env(safe-area-inset-bottom));"></div>
    <div v-if="type==1" class="fixed">
      <div @click="submitEva" class="submit_btn">
        提交
      </div>
    </div>
  </div>
</template>

<script>
import {submitEvaluate} from "../../common/api/mine";

export default {
  name: "appraiseCrouse",
  data() {
    return {
      fileList:[],
      type:'',
      model:{
        //设备整齐
        equipmentStar:0,
        //场地整洁
        envStar:0,
        //管理得当
        managerStar:0,
        //工作站评价
        commentToWorkstation:'',
        //教学设计
        courseStar:0,
        //资源精准
        resourcesStar:0,
        //难度适中
        difficultyStar:0,
        //课程评价
        commentToCourse:'',
        //能力水平
        abilityStar:0,
        //敬业精神
        dedicatedStar:0,
        //教学热情
        enthusiasmStar:0,
        //教师评价
        commentToTeacher:'',
        workstationId:false
      },
    }
  },
  onShow() {
    let userInfo=uni.getStorageSync('userInfo')
    this.model.stuId=userInfo.typeId
  },
  onLoad(option) {
    this.model.courseId=option.courseId
    this.type=option.type
    this.model.workstationId=option.workstationId
    if (option.type==2){
      this.model=JSON.parse(option.item)
    }
    uni.setNavigationBarTitle({
      title:option.name
    })
  },
  methods: {
    async submitEvaluate(){
      uni.showLoading({
        mask: true,
        title:'正在提交'
      })
      let res=await submitEvaluate(this.model)
      const {code}=res
      if (code==200){
        uni.hideLoading()
        uni.showToast({
          title:'提交成功'
        })
        setTimeout(()=>{
          uni.navigateBack()
        },1500)
      }else {
        uni.hideLoading()
      }
    },
    updataModel(event,key){
      this.model[key]=event.detail
    },
    del(event){
      this.fileList.splice(event.detail.index,1)
    },
    submitEva(){
      let checkArr=[
        {
          msg:'请对教学设计进行评分',
          value:this.model.courseStar
        },
        {
          msg:'请对资源精准进行评分',
          value:this.model.resourcesStar
        },
        {
          msg:'请对难度适中进行评分',
          value:this.model.difficultyStar
        },
        {
          msg:'请对能力水平进行评分',
          value:this.model.abilityStar
        },
        {
          msg:'请对敬业精神进行评分',
          value:this.model.dedicatedStar
        },
        {
          msg:'请对教学热情进行评分',
          value:this.model.enthusiasmStar
        }
      ]
      if (this.model.workstationId){
        let arr=[
          {
            msg:'请对设备整齐进行评分',
            value:this.model.equipmentStar
          },
          {
            msg:'请对场地整洁进行评分',
            value:this.model.envStar
          },
          {
            msg:'请对管理得当进行评分',
            value:this.model.managerStar
          }
        ]
        checkArr=checkArr.concat(arr)
      }
      for (const checkArrElement of checkArr) {
        if (!checkArrElement.value){
          uni.showToast({
            title:checkArrElement.msg,
            icon:'none'
          })
          return
        }
      }
      console.log(this.model,'model')
      this.submitEvaluate()
    },
    afterRead(event) {
      const { file } = event.detail;
      console.log(file)
      this.fileList.push(file.url)
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      // uni.uploadFile({
      //   url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
      //   filePath: file.url,
      //   name: 'file',
      //   formData: {
      //     user: 'test'
      //   },
      //   success(res) {
      //     console.log(res)
      //   },
      // });
    },
  }
}
</script>

<style scoped lang="scss">
.container{
  width: 750rpx;
  min-height: 100vh;
  padding: 0 32rpx;
  box-sizing: border-box;
  .appraise_item{
    width: 100%;
    background: #FFFFFF;
    border-radius: 32rpx;
    padding: 40rpx 32rpx;
    box-sizing: border-box;
    margin-top: 40rpx;
    .title{
      font-size: 28rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
    }
    .appraise_star{
      margin-top: 36rpx;
      .appraise_star_item{
        display: flex;
        align-items: center;
        margin-bottom: 28rpx;
        .appraise_star_label{
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
        .appraise_star_content{
          margin-left: 34rpx;
        }
        .appraise_star_value{
          margin-left: 36rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FEAD22;
        }
      }
    }
    .textarea_content{
      width: 100%;
    }
  }
}
.fixed{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 32rpx;
  box-sizing: border-box;
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  left: 0;
  .submit_btn{
    @include btn_plain_line(linear-gradient(140deg, #ff4d03 0%, #ff9a00 100%), #ffffff, #ff9a00) {
      width: 100%;
      height: 88rpx;
      border-radius: 44rpx;
    }
  }
}

::v-deep .van-cell{
  padding: 0;
}
</style>
